<template>
  <div id="mainportal" class="container" style="background-color: #fff;">

<div style="height:20px;"></div>

     





<ul
  v-infinite-scroll="loadMore"
  :infinite-scroll-disabled="loading"
  infinite-scroll-distance="20" >

   <li  v-for="(itemObj,index) in carList" class='contentBox1'  :style="$store.getters.getMerchant.cascader ?'padding:15px 0':''"   style='  border-bottom: solid 1px #e5e5e5;'>
    
     <img  :src='itemObj.icon'  style='width:120px;height:80px;margin-right:10px' v-if="itemObj.icon!==''" />
          <div v-else style='width:70px;margin-right:10px'></div>

          <div  style='flex:1;display: flex;align-items: center;'>
            <div>
              <div>
                <span style='color:#FD7D31'>   {{itemObj.engine}}</span>
                <span class='lineTwo'> {{itemObj.brandName}} {{itemObj.seriesName}}  {{itemObj.modelName}}</span>
              </div>
              <div style='bottom:5px;' :style="'color:'+$store.getters.getMerchant.themeColors" >
                参考价:￥
                <span style='margin-right:5px'>{{itemObj.price}}</span>万
              </div>
     
            </div>
          </div>

     </li>
</ul>

<div style="    display: flex;
    align-items: center;
    justify-content: center;font-size:14px;padding:15px;">

    <div v-if="loading">加载中...</div>
    <div v-else>-</div>
  
</div>



  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      goodsId: "",
      page: 0,
      carList: [],
      loading: false
    };
  },
  computed: {},

  methods: {
    loadMore() {
      console.log("刷新");
      this.loading = true;

      let self = this;
      setTimeout(() => {
        console.log(111);
        self.getCarList();
        self.loading = false;
      }, 1000);
    },
    getCarList() {
      let url = this.$baseUrl.bizUrl + "/goods/car/query";
      let data = {
        page: this.page,
        pageSize: 20,
        goodsId: this.goodsId
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.data.status != 200) {
          console.log("请求数据错误");
          return;
        }

        if (res.data.status == 200) {
          // this.carList = res.data.data.carList;

          if (res.data.data.carList.length != 0) {
            res.data.data.carList.forEach((item, index) => {
              this.carList.push(item);
            });
            this.page += 1;
          } else {
            return;
          }
        }
      };
      this.$reqFormPost(url, data, callBack);
    }
  },
  mounted() {
    this.goodsId = this.$route.query.goodsId;
    this.getCarList();
  }
};
</script>
<style>
.contentBox1 {
  display: flex;
  margin-left: 10px;
  padding: 0 10px 20px;
  font-size: 12px;
}
.lineTwo {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
